<template>
<c-card>
  <div class="top">
    <el-button link type="primary" @click.stop="detailHandle">
      多图
    </el-button>
    <el-checkbox v-model="isAuto" label="自动刷新" @change="autoHandle"/>
  </div>
  <el-table @row-click="rowHandle"
            @selectionChange="selectionChange"
            :data="tableData"
            :default-sort="{ prop: 'ratio', order: 'descending' }"
            @sort-change="sortChange"
            stripe
            highlight-current-row>
    <el-table-column type="selection" width="30" />
    <el-table-column prop="stockCode" label="代码"/>
    <el-table-column prop="stockName" label="名称"/>
<!--    <el-table-column prop="price" label="最新价" sortable>-->
<!--      <template #default="{row}">-->
<!--        <el-text v-if="row.ratio > 0" type="danger">{{row.price}}</el-text>-->
<!--        <el-text v-else-if="row.ratio < 0" type="success">{{row.price}}</el-text>-->
<!--        <el-text v-else>{{row.price}}</el-text>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column prop="ratio" label="涨跌比" sortable>-->
<!--      <template #default="{row}">-->
<!--        <el-text v-if="row.ratio > 0" type="danger">{{row.ratio}}%</el-text>-->
<!--        <el-text v-else-if="row.ratio < 0" type="success">{{row.ratio}}%</el-text>-->
<!--        <el-text v-else>{{row.ratio}}%</el-text>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column prop="turnoverRate" label="换手率" sortable>-->
<!--      <template #default="{row}">-->
<!--        {{row.turnoverRate}}%-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column prop="peRatio" label="市盈率" sortable>-->
<!--      <template #default="{row}">-->
<!--        {{row.peRatio}}-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column prop="bkName" label="行业板块" sortable/>
    <el-table-column label="操作" width="200" align="center">
      <template #default="{row}">
        <el-button v-if="row.stockCode !== '000000'" link type="danger" @click.stop="delHandle(row)">
          删除
        </el-button>
        <el-button link type="success" @click.stop="dfHandle(row)">东方</el-button>
      </template>
    </el-table-column>
  </el-table>
  <c-pagination @page-change="pageChange" :total="pagination.total" :page="pagination.page"
                :limit="pagination.pageSize"></c-pagination>
</c-card>
  <add-update ref="addUpdateRef" @ok="getPageList"></add-update>
  <c-add-update-thrend ref="addUpdateThrendRef" @ok="getPageList"></c-add-update-thrend>
</template>

<script setup>
import {onBeforeUnmount, onMounted, provide, reactive, ref} from "vue";
import {DEL, GET, POST} from "../../../api/index.js";
import {
  getColorName,
  getPriceColorName,
  messageBox,
  notify,
  openDf,
  timeRefresh,
  toStockDetail
} from "../../../utils/commonScript.js";
import CCard from "../../../c-components/c-card.vue";
import {useRouter} from "vue-router";
import AddUpdate from "./add-update.vue";
import {typeOptions} from "../../../utils/listData.js";
import CPagination from "../../../c-components/c-pagination.vue";
import {camelToSnake} from "../../../utils/index.js";
import CAddUpdateThrend from "../../../c-components/c-add-update-thrend.vue";

const addUpdateRef = ref(null)
const tableData = ref([])
const isLoading = ref(false)
const isAuto = ref(false)
const timer = ref(null)
const addUpdateThrendRef = ref(null)

const router = useRouter()
const selectIds = ref([])
const selectNames = ref([])
const formInline = reactive({
  orderField: 'ratio',
  order: 'desc'
})

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const sortChange = (row) => {
  formInline.orderField = camelToSnake(row.prop)
  formInline.order = row.order === 'ascending' ? 'asc' : 'desc'
  pageChange(1, 10)
}

const pageChange = (page, pageSize) => {
  pagination.page = page
  pagination.pageSize = pageSize
  getPageList()
}

const getLevelName = (level) => {
  if(!level) {
    return  ''
  }
  return typeOptions.filter(item => item.value == level)[0]?.label
}

const updateHandle = (row) => {
  addUpdateRef.value.open(row)
}

const updateThrendHandle = (row) => {
  addUpdateThrendRef.value.open(row)
}

const dfHandle = (row) => {
  openDf(row.stockCode)
}

const selectionChange = (rows) => {
  selectIds.value = rows.map(item => item.stockCode)
  selectNames.value = rows.map(item => item.stockName)
}
const detailHandle = () => {
  if(selectIds.value.length){
    toStockDetail(router, selectIds.value.join(), selectNames.value.join())
  } else{
    notify('请勾选要显示的股票', 'error')
  }
}
const rowHandle = (row) => {
  toStockDetail(router, row.stockCode, row.stockName)
}

const autoHandle = (val) => {
  if(val) {
    timeRefresh(() => {
      timer.value = setInterval(() => {
        getPageList()
      }, 60000)
    })
  } else {
    clearHandle()
  }
}

const clearHandle = () => {
  clearInterval(timer.value)
  timer.value = null
}

onBeforeUnmount(() => {
  clearHandle()
})

// 获取所有股票信息
const getPageList = () => {
  isLoading.value = true
  GET("/market/user/page", {
    page: pagination.page,
    pageSize: pagination.pageSize,
    orderField: formInline.orderField,
    order: formInline.order
  }).then(res => {
    tableData.value = res.data.list
    pagination.total = res.data.total
    isLoading.value = false
  }).catch(() => {
    isLoading.value = false
  })

}
getPageList()

const delHandle = (row) => {
  messageBox.confirm(
      `确定要删除 【${row.stockName}】?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        DEL('/market/user', [row.id]).then(res => {
          notify('删除成功')
          getPageList()
        })
      })
      .catch(() => {

      })


}

</script>

<style lang="scss" scoped>
.top{
  display: flex;
  justify-content: space-between;
}
</style>
